//require('path') 获取当前文件所在路径。
const path = require('path');
const  webpack=require('webpack');
//引入插件
const  hlugin =require('html-webpack-plugin')
//引入插件
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports ={
    //服务配置用于测试
    devServer:{
      contentBase:'./dist',
        inline:true
    },
    //插件
    plugins: [
        //配置插件的节点，所有插件都要在这里配置
        new VueLoaderPlugin(),
        //版权声明插件。
        new webpack.BannerPlugin('-------------我的vue--------------'),
    //     install html-webpack-plugin --save-dev  安装自动生成 index.html文件的插件
        new hlugin({
            /**
             * 如果没有指定模板就会生成一个标准的html文件，如果指定看模板就会按模板生成文件。
             * 模板的直接指定文件名就行了。因为默认路径就是与 webpack.config.js同级的位置，
             *
             * */
            template:'index.html'
            }
        )
    ],
    entry:path.join(__dirname,'./src/main.js'),//需要打包文件路径
    output:{
        path:path.join(__dirname,'./dist'),//打包好文件存放地址（path 需要绝对路径，str.("","") 是拼接字符的方法。）
        filename:'bundle.js'//打包好的文件名字
    },
    mode:'development',//设置mode
    module: {
        rules: [
            // //以.ts结尾的文件 使用 ts-loader进行打包
            { test: /\.ts$/, use: 'ts-loader' },
            //以.css结尾的文件 使用 css-loader进行打包
            //css-loader 编辑 css文件  style-loader挂载css文件 应为该文件读取的是从右向左读取，
            //所以一定要  css在右 style在左。
            {test: /\.css$/,use: [{loader: "style-loader"}, {loader: "css-loader"}]},
            //配置vue
            {
                test: /\.vue$/,
                use: ['vue-loader']
            },
            //配置文件
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 130000,
                        },
                    },
                ],
            },
            //html
            {
                test: /\.html$/i,
                loader: 'html-loader',
            },

        ],
    },
    resolve:{
        //别名
        alias:{
            'vue$':'vue/dist/vue.esm.js'
        }
    }

}